<template>
       <div class="header">
      <Theader />
      <h2  @click="toTop" >
    排行榜
</h2>
      <h2 @click="updateTop">
    新歌速递
</h2>

<h2   @click="toVideo">
    视频
</h2>
<h2  @click="toMV">
    最新MV
</h2>
<router-view></router-view>

  </div>

</template>

<script lang="ts" setup>
import Theader from '../main/cop/header.vue'
import playlist from '@/base-ui/TList/src/playList.vue';
import { useStore } from '@/store';
import { computed ,watchEffect,ref} from 'vue'
import { useRouter } from 'vue-router';


const router = useRouter()
const store = useStore()
router.push('/music/topinfo')
const updateTop = async()=>{
router.push('/music/topinfo')

}

const toTop = ()=>{
  router.push('/music/musicTop')

}
const toMV = ()=>{
  router.push('/music/mv')
}

const toVideo = ()=>{
  router.push('/music/musicvideo')
}
</script>
<style lang="less" scoped>
h2{
  margin-left: 50px;
  padding-top: 30px;
  font-weight: 900;
  cursor: pointer;
}
.card_content{
  margin-top: -220px;
  margin-left: 500px;
  width: 1000px;
  height: 500px;
  position: absolute;
}
.top_header{
  margin: -250px  550px;
 position: absolute;
  width: 520px;
  height: 50px;
  span{
    font-weight: 600;
    padding: 12px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
}
</style>
